<template>
    <div>
        <!--查询条件start --111s-->
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
                <el-date-picker
                    v-model="createTime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="dateChange"
                ></el-date-picker>
            </el-form-item>

            <el-form-item class="query-form-item">
                <el-input
                    v-model="query.content"
                    placeholder="请输入订单号/买家/手机号码"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="onSubmit"
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click.native= "dataexport()"> 导出</el-button>

            </el-form-item>
        </el-form>
        <el-form  >

            <el-form-item style="border-bottom:1px solid #ebeef5;"  label-width="0px">

                <el-form-item label="积分总消耗：" style="width:30%;display: inline-block;">
                    <input v-model="headdata.coastintegral" type="text" readonly>

                </el-form-item>
                <el-form-item label="获取总积分：" style="margin-left:80px; width:30%;display: inline-block;">
                    <input v-model="headdata.totalintegral" type="text" readonly>
                </el-form-item>
                <el-form-item label="订单总额：" style="width:30%;display: inline-block;">
                    <input v-model="headdata.totalorderrealprice" type="text" readonly>
                </el-form-item>
            </el-form-item>

        </el-form>

        <!--列表start --222s-->
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            border
        >
            <el-table-column label="序号/用户ID" prop="userid" width="100" align="center"/>
            <el-table-column label="头像" prop="userpic" align="center" width="200">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.userpic" placement="right" trigger="hover">
                        <img :src="scope.row.userpic" style="width:400px;border-radius:3px;">
                        <img
                            slot="reference"
                            :src="scope.row.userpic"
                            style="max-height: 80px;max-width: 50px;border-radius:5px;"
                        >
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="用户昵称" prop="usernick" align="center"/>
            <el-table-column label="手机号码" prop="usermobile" align="center"/>
            <el-table-column label="积分消耗" prop="usersurplusintegral" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.usertotalintegral-scope.row.usersurplusintegral}}</span>
                </template>
            </el-table-column>
            <el-table-column label="积分获取(推广)" prop="usertotalintegral" width="150" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.integraltrend===2">
                      <span>{{scope.row.integral}} </span>
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="积分获取(消费订单)" prop="integral" width="150" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.integraltrend!==2">
                        <span>{{scope.row.integral}} </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单总额(元)" prop="totalorder" width="150" align="center"/>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="detailForm(scope.$index, scope.row)"
                    >查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->

    </div>
</template>
<script>
    import {
        getList,
        gettotalconsumption

    } from "../../api/statistics/consumption.js";
    import Tinymce from "../../components/Tinymce/index.vue";
    import {BASE_URL} from "../../config/app";

    /*用作表单的数据初始化*/
    const formJson = {

    };

    export default {
        components: {
            Tinymce
        },
        data() {
            return {
                pickerOptions: {//快速选择日期
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 180
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                query: {//查询条件
                    content: "",
                    starttime: "",
                    endtime: "",
                    currentPage: 1,
                    pageSize: 10,

                },
                query1: {//头部查询条件
                    starttime: "",
                    endtime: ""
                },
                formData: formJson,//新增或修改的对象
                formName: '',
                formMap: {
                    add: "添加",
                    edit: "编辑",
                    detail:"查看"
                },

                curRowIndex:0,//图片row
                createTime: [],//选择日期时需要的model
                createTime1: [],//选择日期时需要的model
                list: [],//列表集合
                headdata:{},//头部信息
                totalNumber: 0,//分页总页数
                formVisible: false,//添加编辑显示
                loading: true,//列表加载
                formLoading: false,//表单提交加载
                allLoding: false,//全屏加载
                cancelToggle: false,
                detailVisible: false,//查看
                classification: false,
                multipleSelection: [], //多选集合

            };
        },

        methods: {
            dataexport(){
                //alert("导出")
                window.location.href =
                    BASE_URL +
                    "/ConsumptionStatistics/exportdata?"  + "&starttime="
                    + this.query.starttime + "&endtime=" + this.query.endtime+"&content=" + this.query.content;
            },

            //add 隐藏表单
            hideForm() {
                // 更改值
                this.formVisible = !this.formVisible;
                // 清空表单
                this.$refs["dataForm"].resetFields();

                this.query.warehousename = "";
                return true;
            },
            /* --------------*/
            //筛选上架
            shelfstatus() {
                //  alert(this.query.onshelfstatus);

                if (this.query.onshelfstatus === '0') {
                    this.$router.push({
                        path: ""
                    });
                    //刷新事件需要重置查询条件
                    this.createTime = [];
                    this.query = {
                        currentPage: 1,
                        pageSize: 10,
                    };
                    this.getList();
                } else {
                    this.query.currentPage = 1;
                    this.$router.push({
                        path: "",
                        query: this.query
                    });
                    this.getList();
                }


            },
            //头部筛选
            headdatachange() {
                this.loading = true;
                var params = new URLSearchParams();
                params.append("starttime", this.query1.starttime);
                params.append("endtime", this.query1.endtime);
                gettotalconsumption(params)
                    .then(response => {
                        this.loading = false;
                        if (response.code) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.headdata=response.data;
                        this.loading = false;
                        this.$message.success("更新成功");
                        // 刷新数据
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },

            // 显示表单
            handleForm() {
                this.formVisible = true;
                this.formName="add"
                this.getBusWarehouse();
            },

            //显示 查看弹框
            detailForm(index, row) {
                // alert(row.orderid)
                if (row !== null) {
                    this.$router.push({ path:'/commodity/order',query:{userid:row.userid} });
                }
            },

            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                return true;
            },

            /*获取列表事件*/
            getList() {
                this.loading = true;
                this.list = [];
                getList(this.query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }

                     this.list = response.data.list || [];

                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.list = [];
                })
            },

            /*日期选择事件*/
            dateChange(val) {
                if (val == null) {
                    this.query.starttime = "";
                    this.query.endtime = "";
                } else {
                    this.query.starttime = val[0];
                    this.query.endtime = val[1];
                    this.query.currentPage = 1;
                }
                this.getList();
            },


            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.$router.push({
                    path: "",
                    query: this.query
                });
                this.getList();
            },

            /*刷新*/
            onRest() {
                this.$router.push({
                    path: ""
                });
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10,
                };
                this.getList();
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            }

        },

        created() {
            this.getList();
            this.headdatachange();
        }
    }

</script>
<style type="text/css">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 21px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>


